<template>
	<div class="box">
		<h2>多选框</h2>
		<h4>样式效果：</h4>
		<label class="checkbox mr20"><span class="checkbox-input"></span><span class="checkbox-label">未选</span></label>
		<label class="checkbox mr20 checked"><span class="checkbox-input"></span><span class="checkbox-label">选中</span></label>
		<label class="checkbox mr20 disabled"><span class="checkbox-input"></span><span class="checkbox-label">不可选</span></label>
		<label class="checkbox mr20 disabled checked"><span class="checkbox-input"></span><span class="checkbox-label">不可选</span></label>
		<h4 class="mt20"></h4>

		<label class="checkbox mr20" @click="checkAllItem" :class="{'checked':isCheckedAll,'indeterminate':indeterminate}"><span class="checkbox-input"></span><span class="checkbox-label">全选</span></label>
		<div>
			<label class="checkbox mr20" v-for="item in items" :key="item.id" @click="checkItem(item)" :class="{'checked':item.isChecked}">
				<span class="checkbox-input"></span>
				<span class="checkbox-label">{{item.slbm}}</span>
			</label>
		</div>
		<button @click="delConfirm">删除</button>
	</div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      items: [
        { id: "1", slbm: "后勤处" },
        { id: "2", slbm: "学工处" },
        { id: "3", slbm: "计财处" },
        { id: "4", slbm: "教务处" }
      ],
      isCheckedAll: false,
      indeterminate: false,
      checkedItems: [] //当前选中行
    };
  },
  methods: {
    //单选
    checkItem(item) {
      //判断是否存在isChecked
      console.log(item.hasOwnProperty("isChecked"));
      if (!item.hasOwnProperty("isChecked")) {
        //Vue.set是全局注册
        this.$set(item, "isChecked", true); //局部注册对象属性
        this.checkedItems.push(item);
      } else {
        item.isChecked = !item.isChecked;
        if (item.isChecked) {
          this.checkedItems.push(item);
        } else {
          let index = this.checkedItems.indexOf(item);
          if (index > -1) {
            this.checkedItems.splice(index, 1);
          }
        }
      }
      let len = this.checkedItems.length;
      if (len === 0) {
        this.isCheckedAll = false;
        this.indeterminate = false;
      } else if (len === this.items.length) {
        this.isCheckedAll = true;
        this.indeterminate = false;
      } else {
        this.isCheckedAll = false;
        this.indeterminate = true;
      }
    },
    //全选、取消全选
    checkAllItem() {
      this.isCheckedAll = !this.isCheckedAll;
      this.indeterminate = false;
      this.items.forEach(item => {
        if (!item.hasOwnProperty("isChecked")) {
          this.$set(item, "isChecked", true);
        } else {
          item.isChecked = this.isCheckedAll;
        }
      });
      if (this.isCheckedAll) {
        this.checkedItems = this.items.slice();
      } else {
        this.checkedItems = [];
      }
    },
    delConfirm() {
      if (this.checkedItems == "") {
        this.$my_message("请选择要删除的选项", "warning");
      } else {
        this.$my_confirm("确实删除？", "提示", { type: "warning" })
          .then(() => {
            for (let item of this.checkedItems) {
              let index = this.items.indexOf(item);
              if (index > -1) {
                this.items.splice(index, 1);
              }
            }
            this.checkedItems = [];
          })
          .catch(() => {});
      }
    }
  }
};
</script>
